<template>
  <div class="wrapper">
    <section class="nav-statis">
      <article
        :class="item.type == 2 ? 'user-huaxiang' : 'nav-item'"
        v-for="(item, index) in statisList"
        :key="index"
      >
        <div class="text-content" v-if="item.type == 1">
          <!-- <div class="empty-ele"></div> -->
          <p class="text-label">{{ item.label }}</p>
          <p class="text-value">{{ item.value }}</p>
        </div>
        <div v-else-if="item.type == 2">
          <img
            src="@/assets/nx/laonianrenhuaxiang.png"
            class="icon-img"
            alt=""
          />
          <p class="text-title">老年人人物画像</p>
        </div>
        <div class="hover-chart" v-if="item.type == 1">
          <AplidCharts
            style="height: 100%; width: 100%"
            ref="chart"
            type="line"
            :option="TopLineData"
          ></AplidCharts>
        </div>
      </article>
    </section>

    <div class="container">
      <div class="map">
        <ChartMap style="height: 100%; width: 100%"></ChartMap>
        <!-- <MapPart  style="height: 100%;width:100%;"></MapPart> -->
      </div>
      <div class="area-1 flex gap-20">
        <div class="apply-num flex1">
          <p class="nav-title">各区适老化改造申请数量/百分比</p>
          <AplidCharts
            style="height: 209px; width: 100%"
            ref="chart"
            type="bar"
            :option="ApplyNumData"
          ></AplidCharts>
        </div>
        <div class="install-status flex1">
          <p class="nav-title">适老化改造安装情况分析图</p>
          <PiePart style="height: 209px; width: 100%"></PiePart>
        </div>
      </div>
      <div class="area-2 flex gap-20">
        <div class="age-num flex1">
          <p class="nav-title">年龄段人数分布/占比</p>
          <div style="height: 235px; width: 100%; position: relative">
            <div class="ageNumBack"></div>
            <AplidCharts
              style="height: 235px; width: 100%; position: absolute"
              ref="chart"
              type="pie"
              :option="AgeNumDistributionData"
            ></AplidCharts>
          </div>
        </div>
        <div class="type-num flex1">
          <p class="nav-title">老人类别人数分布/占比</p>
          <div style="height: 235px; width: 100%; position: relative">
            <div class="typeNumBack"></div>
            <AplidCharts
              style="height: 235px; width: 100%; position: absolute"
              ref="chart"
              type="pie"
              :option="TypeNumDistributionData"
            ></AplidCharts>
          </div>
        </div>
      </div>
      <div class="area-3">
        <div class="f-between">
          <p class="nav-title">各区机构、设施入住统计/覆盖率</p>
          <NavTabs :tabs="tabsList1" v-model="activeName1"></NavTabs>
        </div>
        <AplidCharts
          :key="activeName1"
          style="height: 288px; width: 100%"
          ref="chart"
          type="bar"
          :option="StayStatisticsData"
        ></AplidCharts>
      </div>
      <div class="area-4 flex gap-20">
        <div class="level-num flex1" style="position: relative">
          <p class="nav-title">老年人能力等级人数分布/占比</p>
          <!-- <RightPie ref="Pie3d2" style="height: 181px;width:325px" type="Pie3d2"></RightPie> -->
          <AplidCharts
            style="height: 216px; width: 100%"
            ref="chartPie3dEl"
            type="Pie3d"
            :option="CapabilityLevelPie3d(CapabilityLenend)"
          ></AplidCharts>
        </div>

        <div class="five-type flex1" style="position: relative">
          <p class="nav-title">五类老人分布/占比</p>
          <div class="fiveType">
            <div class="fiveTypeBack"></div>
            <AplidCharts
              class="chart-fiveType"
              style="height: 216px; width: 100%"
              ref="chartOrgEl2"
              :option="FiveTypePie()"
            ></AplidCharts>
          </div>
        </div>
      </div>
      <div class="area-5 flex gap-20">
        <div class="volunteer flex1" style="position: relative">
          <p class="nav-title">提供志愿者服务年龄段分布/占比</p>
          <AplidCharts
            ref="chartEl1"
            :option="VolunteerPieChartConfig()"
            style="height: 80%; width: 100%"
          ></AplidCharts>
        </div>
        <div class="server-num flex1">
          <p class="nav-title">各类业务服务人数分布/占比</p>
          <!-- <RightPie ref="Pie3d" style="height: 181px;width:325px"  type="Pie3d"></RightPie> -->
          <AplidCharts
            ref="chartPie3dEl"
            type="Pie3d"
            style="height: 80%; width: 100%"
            :option="BusinessTypePie3d(BusinessLenend)"
          ></AplidCharts>
        </div>
      </div>
      <div class="area-6">
        <div class="f-between">
          <p class="nav-title">老年人居住情况统计</p>
          <NavTabs :tabs="tabsList2" v-model="activeName2"></NavTabs>
        </div>
        <AplidCharts
          :key="activeName2"
          ref=""
          type="bar"
          :option="elderlyResidence()"
          style="width: 100%; height: 100%"
        ></AplidCharts>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavTabs from "./components/NavTabs/index.vue";
import {
  CapabilityLevelPie3d,
  VolunteerPieChartConfig,
  BusinessTypePie3d,
  FiveTypePie,
  elderlyResidence,
} from "./RightPartConfigs";
import {
  ApplyNum,
  StayStatistics,
  AgeNumDistribution,
  TypeNumDistribution,
  TopLine,
} from "./LeftPartConfig";
import PiePart from "./components/Pie3D/index.vue";
import MapPart from "@/views/nx/components/Map/index.vue";
import RightPie from "@/views/nx/components/RightPie3D/index.vue";
import ChartMap from "@/views/nx/components/ChartMap/index.vue";
import gsap from "gsap";
let AniTimeline = null;
const gsapAni = () => {
  AniTimeline = gsap.timeline();
  let applyNum = document.getElementsByClassName("apply-num");
  let InstallStatus = document.getElementsByClassName("install-status");
  let ageNum = document.getElementsByClassName("age-num");
  let typeNum = document.getElementsByClassName("type-num");
  let area3 = document.getElementsByClassName("area-3");

  let levelNum = document.getElementsByClassName("level-num");
  let fiveType = document.getElementsByClassName("five-type");
  let volunteer = document.getElementsByClassName("volunteer");
  let serverNum = document.getElementsByClassName("server-num");
  let area6 = document.getElementsByClassName("area-6");

  let emptyEle = document.getElementsByClassName("empty-ele");
  let ltr = [{ x: -800 }, { x: 0 }];
  let rtl = [{ x: 800 }, { x: 0 }];

  AniTimeline.fromTo([InstallStatus[0], typeNum[0]], 2, ...ltr, 0);
  AniTimeline.fromTo([area3[0], applyNum[0], ageNum[0]], 2, ...ltr, 1);

  AniTimeline.fromTo([levelNum[0], volunteer[0]], 2, ...rtl, 0);
  AniTimeline.fromTo([fiveType[0], serverNum[0], area6[0]], 2, ...rtl, 1);

  let TopTimeline = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true });
  TopTimeline.fromTo(emptyEle, { y: -2 }, { y: 11, ease: "bounce.out" });
};
onMounted(() => {
  gsapAni();
});

const CapabilityLenend = [
  //能力等级
  {
    name: "能力完好",
    value: 10,
    itemStyle: {
      color: "#1BF2D8",
      opacity: 0.7,
      label: {
        show: true,
      },
    },
  },
  {
    name: "轻度失能",
    value: 39,
    itemStyle: {
      color: "#52E1A7",
      opacity: 0.7,
    },
  },
  {
    name: "中度失能",
    value: 26,
    itemStyle: {
      color: "#CDDB85",
      opacity: 0.7,
    },
  },
  {
    name: "重度失能",
    value: 16,
    itemStyle: {
      color: "#3968E0",
      opacity: 0.7,
    },
  },
];

const BusinessLenend = [
  {
    name: "政府购买",
    value: 10,
    itemStyle: {
      color: "#1999D5",
    },
  },
  {
    name: "社区居家",
    value: 39,
    itemStyle: {
      color: "#07BF89",
    },
  },
  {
    name: "家庭养老床位",
    value: 26,
    itemStyle: {
      color: "#AC6DE1",
    },
  },
  {
    name: "居家上门",
    value: 16,
    itemStyle: {
      color: "#FF9898",
    },
  },
  {
    name: "助餐",
    value: 5,
    itemStyle: {
      color: "#FDE565",
    },
  },
];
const areaChartData = [
  { label: "玄武区", value: 73, value2: 329 },
  { label: "秦淮区", value: 115, value2: 1594 },
  { label: "建邺区", value: 68, value2: 58 },
  { label: "鼓楼区", value: 185, value2: 87 },
  { label: "栖霞区", value: 181, value2: 1612 },
  { label: "雨花台区", value: 79, value2: 105 },
  { label: "江宁区", value: 230, value2: 4230 },
  { label: "浦口区", value: 66, value2: 668 },
  { label: "六合区", value: 107, value2: 15 },
  { label: "溧水区", value: 150, value2: 30 },
  { label: "高淳区", value: 130, value2: 196 },
  { label: "江北新区", value: 82, value2: 60 },
];

const tabsList1 = [
  { label: "入住社区人数", value: "1" },
  { label: "入住养老机构人数", value: "2" },
  { label: "覆盖率", value: "3" },
];
const tabsList2 = [
  { label: "居住统计", value: "1", style: { flex: "1" } },
  { label: "居住占比", value: "2", style: { flex: "1" } },
];

const activeName1 = ref("1");
const activeName2 = ref("1");
const statisList = [
  { label: "常住人口（万人）", value: "949.11", type: 1, prop: "name1" },
  { label: "户籍人口（万人）", value: "739.36", type: 1, prop: "name1" },
  { label: "老年人人物画像", type: 2, prop: "name1" },
  { label: "户籍老年人口（万人）", value: "156.18", type: 1, prop: "name1" },
  { label: "老龄化率（%）", value: "28.65", type: 1, prop: "name1" },
];
// 左边的统计表
let ApplyNumData: any = ref(ApplyNum(areaChartData));
let StayStatisticsData: any = ref(StayStatistics(areaChartData));
let AgeNumDistributionData: any = ref(AgeNumDistribution());
let TypeNumDistributionData: any = ref(TypeNumDistribution());
// let InstallStatusData:any = ref(InstallStatus())
let TopLineData: any = ref(TopLine());
</script>

<style scoped lang="scss">
@import "./main.scss";

</style>
